
import LoginDialog from './LoginDialog.vue';
<template>
  <div class="lin_index_displayshow">
    <div class="lin_index_displayshow_list">
      <a href="#">
        <div class="lin_index_displayshow_list_up">
          <div>
            <img src="https://res.insta360.com/static/a6207c65cc2ad10d96fbe00a9f66a68c/ace-de.svg">
          </div>
          <div>
            <img src="https://res.insta360.com/static/5ec8ec1805403466e4cec27492fdcf18/acepro.png">
          </div>
      </div>
      </a>


      <a href="#">
        <div class="lin_index_displayshow_list_down video-container">
          <a herf="#" class="lin_index_displayshow_list_down_img">
            <img src="https://res.insta360.com/static/infr_base/a56e5ae5ed3cef38f702657f52c2c355/en.svg">
          </a>
          <div class="lin_index_displayshow_list_down_title">
            <ul>
              <li>
                <a>BUY NOW</a>
              </li>
              <li>
                <a>LEARN MORE</a>
              </li>
              <li>
                <a>WATCH VIDEO</a>
              </li>
            </ul>
          </div>
          <video autoplay loop muted style="width: 100%; height: 100%; object-fit: fill">
            <source src="https://media.insta360.com/static/infr_base/4905b9fa5c4fad709f4e44784f48ec3b/www-index4.mp4" type="video/mp4">
          </video>
        </div>
      </a>
    </div>
  </div>

  <div class="login_dialog" >
    <div>
      <a href="#" class="login login_icon"><el-icon size="45" @click="login"><Management /></el-icon></a>
    </div>
  </div>
  
  <div class="login_container">
    <div class="login">
      <LoginDialog
      v-model:visible="login_style"
      @closeLogin="closeLogin"
      />
    </div>
  </div>





  


</template>



<script lang="ts">



  export default defineComponent({

    setup(){
      const data = reactive({
        login_style: ref(false),
        consumerShow: ref(false)
      })


      const login = async() => {
        data.login_style = true
      }

      const closeLogin = async() => {
        data.login_style = false
      }

      return{
        ...toRefs(data),
        login,
        closeLogin
      }
    }
  })


</script>



<style scoped>
* {
  margin: 0;
  padding: 0;
  transition: all 0.5s;
  color: black;
}

.lin_index_displayshow {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.lin_index_displayshow_list div:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果，可以根据需要进行调整 */
}

.lin_index_displayshow_list_up {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 1080px;
  height: 220px;
  background-color: rgb(247, 244, 244);
  margin-top: 50px;
  margin-bottom: 30px;
  border-radius: 15px;
}

.lin_index_displayshow_list_up div:nth-child(1) img {
  left: 10px;
  top: 20px;
  margin-right: 175px;
}

.lin_index_displayshow_list_up div:nth-child(2) img {
  position: absolute;
  height: 200px;
  bottom: -65px;
  right: -35px;
}


.lin_index_displayshow_list_down {
  position: relative;
  width: 1080px;
  height: 607px;
  background-color: gray;
}

.lin_index_displayshow_list_down_img{
  position: absolute;
  top: 75px;
  left: 100px;
  width: 25%;
  z-index: 1;
}


.lin_index_displayshow_list_down_title ul{
  display: flex;
  justify-content: center;
  position: absolute;
  top: 172px;
  left: 100px;
  z-index: 1;
}


.lin_index_displayshow_list_down_title ul li {
  margin-right: 60px;
}

.lin_index_displayshow_list_down_title li:nth-child(1) a {
  background: linear-gradient(96.98deg, #fe0, #ffdf4d);
  padding: 10px  40px;
  border-radius: 24px;
  font-size: 12px;
  font-weight: bolder;
}

.lin_index_displayshow_list_down_title li:nth-child(2) a,
.lin_index_displayshow_list_down_title li:nth-child(3) a {
  color: white;
  font-size: 15px;
  font-weight: bolder;
}

.login_dialog {
  display: flex;
  justify-content: center;
  align-content: center;
}



.login_icon {
  top: 90%;
  right: 5%;
}

.consumerShow {
  position: fixed;
  top: 60px;
  z-index: 2;

}

</style>